<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 通过浮动使一个元素像父元素的左侧或右侧移动 -->
		<!-- none默认值 left元素向左移动 right元素向右移动 -->
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<!-- 浮动元素不会盖过文字，文字会自动环绕再浮动元素周围 -->
		文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。文字的不同体现了国家和民族的书面表达的方式和思维不同。文字使人类进入有历史记录的文明社会。
		<!-- 元素设置浮动后，会从文档流中脱离，元素的一些特点也会消失 -->
		<!-- 块元素不会独占一行 -->
		<!-- 脱离文档流后块元素宽度和高度都被内容撑开 -->
		<div class="box4">hello</div>
		<!-- 行内元素脱离文档流后会变成块元素 -->
		<span class="box5">hello2</span>
	</body>
</html>
<style type="text/css">

	.box1{
		width: 200px;
		height: 200px;
		background-color: #000000;
		float: left;
		/* 设置元素浮动后，水平布局等式需要成立 */
		/* 设置元素浮动后，元素会从文档流中完全脱离 ,不在占据文档流中位置*/
		/* 设置浮动后元素回望父元素左侧或右侧移动 */
		/* 浮动元素不会从父元素中移出 */
		/* 浮动元素移动时，不会超过前面的其他元素 */
	}
	.box2{
		width: 400px;
		height: 400px;
		background-color: #FF0000;
		float: left;
	}
	.box3{
		width: 200px;
		height: 200px;
		background-color: #FFFF00;
		float: left;
	}
	.box4{
		background-color: #00FFFF;
		float: left;
	}
	.box5{
		float: left;
		width: 200px;
		height: 200px;
		background-color: #E8E8E8;
		line-height: 100px;
	}
</style>
